<template>
  <div id="cart">
    <div class="wrapper">
      <div class="item"><div class="circle"></div>30天无忧退货</div>
      <div class="item"><div class="circle"></div>48小时快速退款</div>
      <div class="item"><div class="circle" />满88元免邮费</div>
    </div>
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-swipe-cell v-for="(item,index) in carts" :key="index">
          <div>
          <van-checkbox @change="onClickCard" v-model="item.checked" style="width: 10%; display: inline-block; padding-bottom: 41px;"></van-checkbox>
          <van-card
            :num="item.number"
            :price="item.retail_price"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
            @click="onClickGoods(item.goods_id)"
          />
          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="onClickdel(item.id)" />
          </template>
        </van-swipe-cell>
      </van-list>
    </div>
    <van-submit-bar
      :loading="submitloading"
      :disabled="totalAmount==0"
      :price="totalAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox @change="onClickAll" v-model="checkedAll" >全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #cart{
    width: 100%;
    height: 100%;
    .list{
      height: calc(100% - 100px);
      overflow-y: scroll;
    }
    .wrapper{
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: rgb(185, 185, 185);
      .item{
        display: inline-block;
        width: 33%;
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        font-size: 0.8rem;
        .circle{
          width: 8px;
          height: 8px;
          display: inline-block;
          border-radius: 4px;
          border: 1px solid red;
        }
      }
    }
  }
  /deep/.van-card{
    width: 90%;
    display: inline-block;
  }
  /deep/.van-submit-bar{
    bottom: 60px;
  }
  /deep/.delete-button{
    height: 100%;
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { 
  Image as VanImage,List,Card,Col, Row,
  Icon ,Checkbox, CheckboxGroup ,SubmitBar,SwipeCell,Button
} from 'vant';
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import router from '../router';
import store from '../store/index';
import orderApi from '../api/order.api';
import cartApi from '../api/cart.api';

Vue.use(VanImage).use(Card).use(List).use(Row).use(Col).use(Button)
.use(Icon).use(Checkbox).use(CheckboxGroup).use(SubmitBar).use(SwipeCell);
@Component
export default class CartComponent extends Vue {
  private finished: boolean = false;
  private loading: boolean = false;
  private submitloading: boolean = false;
  private checkedAll: boolean = false;
  private totalAmount: number = 0;
  private marketAmount: number = 0;
  private carts: any[] = [];
  private cartData: any={};
  async created(){
    store.commit('global/setShowPageLoading',true);
    await store.dispatch('cart/getCarts');
    this.cartData=store.getters['cart/data'];
    store.getters['cart/cart'].forEach(v => {
      this.carts.push(Object.assign({},v));
    });
    
    this.onClickCard();
    store.commit('global/setShowPageLoading',false);
  }

  private async onLoad(){
    const p=this.cartData.page+1;
    if(p>this.cartData.pageCount){
      this.finished=true;
      return;
    }
    this.loading=true;
    await store.dispatch('cart/getCarts',{page:p});
    this.cartData=store.getters['cart/data'];
    this.carts=this.carts.concat(this.cartData.data);
    this.loading=false;
  }

  private onSubmit(){
    store.commit('order/setSubmit',{
      totalAmount:this.totalAmount,
      marketAmount:this.marketAmount,
      goods:this.carts.filter( o => o.checked)
    });
    router.push({
      path:'/order',
    });
  }

  private onClickCard(){
    this.totalAmount = 0;
    this.marketAmount = 0;
    this.checkedAll=this.carts.filter( o => o.checked).length==this.carts.length;
    this.carts.filter( o => o.checked).forEach((v,i) => {
      this.totalAmount+=parseFloat(v.retail_price) * v.number;
      this.marketAmount+=parseFloat(v.market_price) * v.number;
    });
  }

  private onClickAll(){
    this.carts.forEach((v,i) => {
      v.checked=this.checkedAll;
    });
  }

  private onClickGoods(id){
    router.push({
      path:`/goodDetail/${id}`
    })
  }

  private async onClickdel(id){
    cartApi.delCart(id);
    for(let i in this.carts){
      if(this.carts[i].id==id){
        this.carts.splice((i as any),1);
      }
    }
  }
}
</script>
